<template>
  <table class="table table-striped" width="1100" height="100%" align="center">
    <tbody style="text-align: center">
      <tr>
        <td>
          <a-card :style="{ width: '1100px', textAlign: 'center' }">
            <div id="addNewsView">
              <h2>个人中心</h2>
              <a-form :model="form" label-align="left">
                <a-form-item field="userId" label="用户id">
                  <a-card :style="{ width: '1100px', height: '100%' }">
                    <span style="font-size: larger">
                      {{ form.id }}
                    </span>
                  </a-card>
                </a-form-item>
                <a-form-item field="userName" label="用户昵称">
                  <a-card :style="{ width: '1100px', height: '100%' }">
                    <span style="font-size: larger">{{ form.userName }}</span>
                  </a-card>
                </a-form-item>
                <a-form-item field="creatTime" label="用户创建时间">
                  <a-card :style="{ width: '1100px', height: '100%' }">
                    <span style="font-size: larger">
                      {{ form.createTime }}
                    </span>
                  </a-card>
                </a-form-item>
                <a-form-item field="creatTime" label="用户更新时间">
                  <a-card :style="{ width: '1100px', height: '100%' }">
                    <span style="font-size: larger">
                      {{ form.updateTime }}
                    </span>
                  </a-card>
                </a-form-item>
                <a-form-item field="userProfile" label="用户简介">
                  <a-card :style="{ width: '1100px', height: '300px' }">
                    <span style="font-size: larger">
                      <MdViewer :value="form.userProfile || '空空的'" />
                    </span>
                  </a-card>
                </a-form-item>
                <a-form-item>
                  <a-button
                    type="primary"
                    style="min-width: 200px"
                    @click="updateMyUser"
                    >修改用户
                  </a-button>
                </a-form-item>
                <a-form-item
                  ><a-button
                    type="primary"
                    style="min-width: 200px"
                    @click="goHome"
                    >返回主页
                  </a-button></a-form-item
                >
              </a-form>
            </div>
          </a-card>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { UserControllerService } from "../../../generated";
import message from "@arco-design/web-vue/es/message";
import { useRoute, useRouter } from "vue-router";
import MdViewer from "@/components/MdViewer.vue";

const route = useRouter();
// 如果页面地址包含 update，视为更新页面
// const updatePage = route.path.includes("update");

let form = ref({
  createTime: "",
  id: null,
  updateTime: "",
  userName: "",
  userProfile: "",
});
/**
 * 根据题目 id 获取老的数据
 */
const loadData = async () => {
  const res = await UserControllerService.getLoginUserUsingGet();
  if (res.code === 0) {
    form.value.id = res.data?.id;
    form.value.createTime = res.data?.createTime;
    form.value.updateTime = res.data?.updateTime;
    form.value.userName = res.data?.userName;
    form.value.userProfile = res.data?.userProfile;
  } else {
    message.error("加载失败，" + res.message);
  }
};

onMounted(() => {
  loadData();
});

const onContentChange = (value: string) => {
  form.value.content = value;
};

const router = useRouter();
const updateMyUser = () => {
  router.push({
    path: "/user/update",
  });
};
const goHome = () => {
  router.push({
    path: "/questions",
  });
};
</script>

<style scoped></style>
